index

工作流程

下面是渲染引擎在获取文档内容之后的大致工作流程：

• Parsing：解析文档
  • 构建文档对象模型
  • 构建样式对象模型
  • 脚本异步加载
• RenderTree：构建渲染
  • 遍历文档树
• Style Calculation：样式计算
• Layout：布局
• Paint：绘制
• Rasterization：光栅化
• Composite：合并

1. 浏览器解析过程

• HTML / SVG / XHTML：渲染引擎通过三个 C++ 的类对应这三类文档，解析这三类文件并构建 DOM 树（DOM Tree）
• CSS：渲染引擎解析外部 CSS 文件及内联 style 标签内的样式数据，并构建 CSS 规则树（ CSS Rule Tree） JavaScript：JavaScript 通过 DOM API 和 CSSOM API 来操作 DOM Tree 和 CSS Rule Tree

2. 构建渲染树（Rendering Tree）
   • 解析完成后，浏览器引擎会通过 DOM 树和 CSS 规则树来构造 渲染树
   • 渲染树并不等同于 DOM 树，因为一些像 <header> 或 display: none 的东西就没必要放到渲染树中
   • CSS 的 Rule Tree 主要是为了完成匹配并把 CSS Rule 附加至渲染树上的每个 Element 上。然后，计算每个渲染对象的位置，这通常是 布局（Layout） 和 重排（Reflow） 过程中发生
   • 一旦渲染树构建完成，浏览器会把树里面的内容绘制在屏幕上。
3. 布局（Layout）：渲染树构建好之后，将会执行布局过程，它将确定每个节点在屏幕上的确切坐标
4. 绘制（Paint）：再下一步就是绘制，即遍历渲染树，并使用渲染引擎绘制每个节点
5. 渲染层合并（Composite）：页面中 DOM 元素的绘制是在多个层上进行的，在每个层上完成绘制过程之后，浏览器会将所有层按照合理的顺序合并成一个图层，然后在屏幕上呈现
6. 最后通过调用操作系统 NativeGUI API 进行绘制

脚本异步加载

现代浏览器总是并行加载资源。脚本文件互相不会阻塞，但是会阻塞其他资源（例如图片、字体等）的下载。

后来为了用户体验，有了 async 和 defer ，脚本标记为异步，不会阻塞其他线程解析和执行。

异步加载

• 标注为 defer 的 JavaScript 脚本文件不会停止 HTML 文档解析，而是等到解析结束才执行
• 标注为 async 只能引用外部脚本，下载完马上执行，但是不能保证加载顺序。